<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue的一些演示</title>
  </head>
  <body>
    <div id="app">
      vue3 CDN 的 基础演示：<br>
      person：{{person}}
    </div>

    <script>
      // 结构，获得 createApp, reactive
      const { createApp, reactive } = Vue
      
      // 定义一个对象，要有 setup、props等属性
      const app = {
        setup(props) {
          const person = reactive({
            name: 'composition API演示'
          })

          return {
            person
          }
        }
      }

      // 创建 Vue 的一个应用
      createApp(app)
        .mount('#app') // 指定渲染的位置
    </script>
  </body>
</html>